<template>
  <i-biz-row :class="classArr" :layout="layoutModel">
    <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
      <i-biz-col
        :layoutPos="convertLayoutPos(panelItem.layoutPos, adaptGrow)"
        :state="container.panelItems[panelItem.id].state"
      >
        <i-biz-panel-detail-shell
          :modelData="panelItem"
          :container="container"
          :controls="controls"
        />
      </i-biz-col>
    </template>
  </i-biz-row>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IControl, IFlexLayoutPos, IPanelContainer } from "@ibiz/model-core";
import { IViewLayoutPanelController } from "@ibiz-template/runtime";
import { computed, PropType, Ref, ref } from "vue";
import { useNamespace } from "@/use";
import { PanelGridContainerController } from "./i-biz-panel-grid-container.controller";

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  container: {
    type: Object as PropType<IViewLayoutPanelController>,
    required: true,
  },
  controller: {
    type: Object as PropType<PanelGridContainerController>,
    required: true,
  },
  controls: {
    type: Array as PropType<
      {
        modelData: IControl;
        slotProps: IData;
      }[]
    >,
    default: () => [],
  },
});

// 获取命名空间和计算相关属性
const ns = useNamespace("grid-container");
const { id } = props.modelData;

// 类名控制
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)];
  result = [
    ...result,
    ...props.controller.containerClass,
    ns.is("hidden", !props.controller.state.visible),
  ];
  return result;
});

const layoutModel = computed(() => {
  return { ...props.modelData.layout, layout: "TABLE_12COL" };
});

// 自适应列个数, 算一次记录下来，后续不用计算
const adaptCols: Ref<undefined | number> = ref(undefined);
// 自适应列默认占据的grow
const adaptGrow: Ref<number> = ref(12);

const convertLayoutPos = (
  layoutPos: any,
  adaptGrowNum: number
): IFlexLayoutPos => {
  const result = {
    ...layoutPos,
    layout: "TABLE_12COL",
    colXS: layoutPos.grow || adaptGrowNum,
    colSM: layoutPos.grow || adaptGrowNum,
    colMD: layoutPos.grow || adaptGrowNum,
    colLG: layoutPos.grow || adaptGrowNum,
  };
  delete result.grow;
  return result;
};

// 计算自适应列个数和默认占据的grow
const calcAdaptGrow = () => {
  if (adaptCols.value === undefined && props.modelData) {
    // 当前已经配置的grow
    let currentGrow = 0;
    // 自适应列个数
    let adaptColsNum = 0;
    props.modelData.panelItems?.forEach((panelItem) => {
      if (panelItem && panelItem.layoutPos) {
        if (typeof panelItem.layoutPos.grow === "number") {
          currentGrow += panelItem.layoutPos.grow;
        } else if (typeof panelItem.layoutPos.grow === "undefined") {
          adaptColsNum += 1;
        }
      }
    });
    // 自适应列默认占据的grow
    let adaptGrowNum = 12;
    if (adaptColsNum > 0) {
      adaptGrowNum = (12 - currentGrow) / adaptColsNum;
    }
    adaptCols.value = adaptColsNum;
    adaptGrow.value = adaptGrowNum;
  }
};

calcAdaptGrow();
</script>
<style lang="scss">
@import "./i-biz-panel-grid-container.scss";
</style>
